<template>
  <ContentWrap v-show="showSearch">
    <GFilters
      ref="FiltersRef"
      :modelValue="filters"
      :config="FILTERS_CONFIG"
      :labelWidth="'68px'"
      @search="onSearch"
      @field:change="onFiltersChangeByKey"
      v-show="showSearch"
    >
      <!-- <template #GDateRangePicker="{ item }">
        <GDateRangePicker
          v-model="filters.createTime"
          v-bind="item"
          @change="onChange"
          class="!w-240px"
        />
      </template> -->
      <template #GDateRangePicker="{ item }">
        <el-input v-model="filters.iKey" class="!w-308px" v-bind="item">
          <template #prepend>
            <GSelect
              v-model="filters.iValue"
              :options="getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
              :clearable="false"
              class="!w-68px"
            />
          </template>
        </el-input>
      </template>
    </GFilters>
  </ContentWrap>

  <ContentWrap>
    <GToolbar v-model:show-search="showSearch" v-model:columns="columns" @refresh-table="getList">
      <el-col :span="15">
        <el-button
          v-hasPermi="['system:role:create']"
          plain
          type="primary"
          @click="openForm('create')"
        >
          <Icon class="mr-5px" icon="ep:plus" />
          新增
        </el-button>
        <el-button
          v-hasPermi="['system:role:export']"
          :loading="exportLoading"
          plain
          type="success"
          @click="handleExport"
        >
          <Icon class="mr-5px" icon="ep:download" />
          导出
        </el-button>
      </el-col>
    </GToolbar>
    <GTable
      :columns="columns"
      :listData="list"
      :loading="loading"
      :showSearch="showSearch"
      v-model:pagination="page"
      @get-list="getList"
    >
      <template #type="{ scope }">
        <dict-tag :type="DICT_TYPE.SYSTEM_ROLE_TYPE" :value="scope.row.type" />
      </template>
      <template #status="{ scope }">
        <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
      </template>
      <template #operation="{ scope }">
        <el-button
          v-hasPermi="['system:role:update']"
          link
          type="primary"
          @click="openForm('update', scope.row.id)"
        >
          编辑
        </el-button>
        <el-button
          v-hasPermi="['system:permission:assign-role-menu']"
          link
          preIcon="ep:basketball"
          title="菜单权限"
          type="primary"
          @click="openAssignMenuForm(scope.row)"
        >
          菜单权限
        </el-button>
        <el-button
          v-hasPermi="['system:permission:assign-role-data-scope']"
          link
          preIcon="ep:coin"
          title="数据权限"
          type="primary"
          @click="openDataPermissionForm(scope.row)"
        >
          数据权限
        </el-button>
        <el-button
          v-hasPermi="['system:role:delete']"
          link
          type="danger"
          @click="handleDelete(scope.row.id)"
        >
          删除
        </el-button>
      </template>
    </GTable>
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <RoleForm ref="formRef" @success="getList" />
  <!-- 表单弹窗：菜单权限 -->
  <RoleAssignMenuForm ref="assignMenuFormRef" @success="getList" />
  <!-- 表单弹窗：数据权限 -->
  <RoleDataPermissionForm ref="dataPermissionFormRef" @success="getList" />
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import download from '@/utils/download'
import * as RoleApi from '@/api/system/role'
import RoleForm from './RoleForm.vue'
import RoleAssignMenuForm from './RoleAssignMenuForm.vue'
import RoleDataPermissionForm from './RoleDataPermissionForm.vue'
import useFetchTable from '@/hooks/useFetchTable'

defineOptions({ name: 'SystemRole' })

const message = useMessage() // 消息弹窗
const FiltersRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

const { loading, showSearch, list, page, filters, onSearch, getList, onFiltersChangeByKey } =
  useFetchTable({
    api: RoleApi.getRolePage,
    formatFilters: ({ ...params }) => ({
      ...params
    })
  })
filters.createTime = ['2024-11-11 00:00:00', '2024-11-12 23:59:59']

const columns = ref([
  // { type: 'selection', prop: 'selection' },
  { type: 'index', prop: 'index', label: '序号', width: '55' },
  { prop: 'id', label: '角色编号', sortable: 'custom' },
  { prop: 'name', label: '角色名称' },
  { prop: 'type', label: '角色类型', slotName: 'type' },
  { prop: 'code', label: '角色标识' },
  {
    prop: 'code1',
    label: '角色标识',
    children: [
      { prop: 'code', label: '标识1' },
      { prop: 'code2', label: '标识2' }
    ]
  },
  { prop: 'sort', label: '显示顺序' },
  { prop: 'remark', label: '备注' },
  { prop: 'status', label: '状态', slotName: 'status', sortable: 'custom' },
  {
    type: 'date',
    prop: 'createTime',
    label: '创建时间',
    width: '180',
    format: 'YYYY-MM-DD HH:mm:ss'
  },
  {
    prop: 'operation',
    label: '操作',
    fixed: 'right',
    width: '260',
    slotName: 'operation'
  }
])

const FILTERS_CONFIG = ref([
  {
    label: '角色名称',
    key: 'name',
    is: 'input',
    placeholder: '请输入'
  },
  {
    label: '角色标识',
    key: 'code',
    is: 'input',
    placeholder: '请输入'
  },
  {
    label: '状态',
    key: 'status',
    is: 'select',
    options: getIntDictOptions(DICT_TYPE.COMMON_STATUS)
  },
  // {
  //   label: '创建时间',
  //   key: 'createTime',
  //   is: 'dateRangePicker',
  //   valueFormat: 'YYYY-MM-DD HH:mm:ss',
  //   defaultValue: ['2024-11-11 00:00:00', '2024-11-11 23:59:59']
  // },
  // {
  //   label: '创建时间',
  //   key: 'createTime',
  //   is: 'dateRangePicker',
  //   valueFormat: 'YYYY-MM-DD HH:mm:ss',
  //   // onChange: () => onChange,
  //   slotName: 'GDateRangePicker'
  // },
  {
    label: '',
    key: 'createTime',
    is: 'dateRangePicker',
    slotName: 'GDateRangePicker'
  }
])

// const onChange = (value) => {
//   console.log(value)
//   console.log(filters)
//   onSearch()
// }

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 数据权限操作 */
const dataPermissionFormRef = ref()
const openDataPermissionForm = async (row: RoleApi.RoleVO) => {
  dataPermissionFormRef.value.open(row)
}

/** 菜单权限操作 */
const assignMenuFormRef = ref()
const openAssignMenuForm = async (row: RoleApi.RoleVO) => {
  assignMenuFormRef.value.open(row)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await RoleApi.deleteRole(id)
    message.success('删除成功')
    // 刷新列表
    await getList()
  } catch {}
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await RoleApi.exportRole(filters)
    download.excel(data, '角色列表.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
</script>

<!-- <template>
  <h1>外层拖动列表123</h1>
  <vuedraggable v-model="outerList">
    <template #item="{ element }">
      <div class="outer-item">
        <h2>内层拖动列表 {{ element.name }}</h2>
        <vuedraggable v-model="element.innerList">
          <template #item="{ element }">
            <div class="inner-item">{{ element.name }}</div>
          </template>
        </vuedraggable>
      </div>
    </template>
  </vuedraggable>
</template>

<script lang="ts" setup>
import vuedraggable from 'vuedraggable'

const outerList = ref([
  {
    id: 1,
    name: '外层项 1',
    innerList: [
      { id: 1, name: '内层项 1-1' },
      { id: 2, name: '内层项 1-2' }
    ]
  },
  {
    id: 2,
    name: '外层项 2',
    innerList: [{ id: 1, name: '内层项 2-1' }]
  }
])
</script> -->
